<template>
    <div class="xiangqing">
        <mt-header class="yan" title="门店详情">
            <img @click="tiao" class="zuo_jian" src="../aimg/zuo.png" alt="" slot="left">
            <img class="zhuanfa" src="../aimg/zhuangfa.png" alt="" slot="right">
        </mt-header>
        <div class="tu" style="height:200px">
            
            <mt-swipe :auto="2000" :continuous="true"  
            :show-indicators="true" >
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic1" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic2" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic3" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic4" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic5" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic6" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic7" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic8" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic9" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="list[this.kid-1].depic10" alt="">
                </mt-swipe-item>
            </mt-swipe>
        </div><br><br>
        <div class="name_zong">
            <span class="name">{{list1[this.kid-1].iname}}</span><br><br>
            <span class="huxing">{{list[this.kid-1].ksome}}</span>
            <div class="score_zong">
                <span class="score">{{list1[this.kid-1].iscore.split("元")[0]}}</span>
                <span  class="yue">元/月起</span>
            </div>
        </div><br><br>
        <div class="pei">
            <span class="peizhi">配套设施</span>
            <span class="shu">更多<img class="you" src="../aimg/you.png" alt=""></span><br><br><br>
            <div class="shezhi">
                <div class="juli">
                    <img class="tubiao" src="../aimg/ditie.png" alt=""><br><br>
                    <p class="zi1">地铁</p>
                </div>
                <div class="juli">
                    <img class="tubiao_li" src="../aimg/bianli.png" alt=""><br><br>
                    <p class="zi2">便利店</p>
                </div>
                <div class="juli">
                    <img class="tubiao_xi" src="../aimg/xiyi.png" alt=""><br><br>
                    <p class="zi3">洗衣服务</p>
                </div>
                <div class="juli">
                    <img class="tubiao_ting" src="../aimg/tingche.png" alt=""><br><br>
                    <p class="zi4">停车场</p>
                </div>
                <div class="juli">
                    <img class="tubiao1" src="../aimg/yumaoqiu.png" alt=""><br><br>
                    <p class="zi5">羽毛球场</p>
                </div>
            </div>
        </div><br><br>
        <div class="wei_zong">
            <div class="wei">
                <img class="tubiao2" src="../aimg/dianhua.png" alt="">
                <p class="zi6">电话咨询</p>
            </div>
            <div class="yuyue">
                在线预约
            </div>
        </div>
        
    </div>
</template>
<script>
    export default{
        props:[ "kid" ],
        data(){
            return{
                list:"",
                list1:"",   
               
            }
        },
        methods:{
            tiao(){
                this.$router.push('/fujing')
            },
            loadPage(){
                this.axios.get("/store_detail/v1/search",{
                    params:{kid:this.kid}
                }).then(res=>{
                    console.log(res.data);
                    this.list=res.data;
                    
                })
            },
            loadPage1(){
                this.axios.get("/store_suo/v1/search"
                ).then(res=>{
                    console.log(res.data);
                    this.list1=res.data;
                    
                })
            }
        },
        mounted(){
            this.loadPage();
            this.loadPage1();
        }
    }
</script>
<style scoped>
*{margin: 0;padding: 0;}
.yan{
    background-color: white;
    color: black;
    font-size: 16px;
}
.zuo_jian{
    width: 25px;height: 25px;
}
.zhuanfa{
    width: 30px;height: 25px;
}
.tu{
    width: 100%;
}
.tu img{
    width: 93%;
    height: 200px;
    margin-left: 14px;
}
.name_zong{
    margin-left: 15px;
}
.name{
    font-weight: 900;
    font-size: 19px;
}
.huxing{
    font-size: 13px;
}
.score_zong{
    float: right;
    margin-top: -5px;
    margin-right: 15px;
}
.score{
    color: coral;
    font-size: 18px;
}
.yue{
    font-size: 13px;
}
.pei{
    margin-left: 15px;
}
.peizhi{
    font-size: 19px;
    font-weight: 900;
}
.shu{
    float: right;
    font-size: 12px;
    color: darkgray;
}
.you{
    width: 20px;height: 20px;
    margin-right: 12px;
    margin-top: 6px;
}
.shezhi{
    display: flex;
    justify-content: space-between;

}
.tubiao{
    width: 45px;height: 40px;
}
.tubiao_li{
    margin-left: -12px;
    width: 45px;height: 40px;
}
.tubiao_xi{
    margin-left: -16px;
    width: 45px;height: 40px;
}
.tubiao_ting{
    margin-left: -26px;
    width: 45px;height: 40px;
}
.tubiao1{
    width: 50px;height: 40px;
    margin-left: -39px;
}
.zi1{
    font-size: 13px;
    margin-left: 10px;
}
.zi2{
    font-size: 13px;
    margin-left: -11px;
}
.zi3{
    font-size: 13px;
    margin-left: -20px;
}
.zi4{
    font-size: 13px;
    margin-left: -25px;
}
.zi5{
    font-size: 13px;
    margin-left: -40px;
}
.wei_zong{
    display: flex;
    position: fixed;
    bottom: 10px;
}
.wei{
    margin-left: 18px;
}
.tubiao2{
    margin-left: 5px;
}
.zi6{
    font-size: 12px;
    color: rgb(133, 133, 133);
}
.yuyue{
    width: 271px;
    height: 41px;
    margin-left: 17px;
    margin-top: 5px;
    background-color: rgb(252, 114, 64);
    line-height: 38px;
    font-size: 12px;
    color: white;
    text-align: center;
    border-radius: 5px;

}
</style>